<template>
  <div class="add-pop">
    <el-drawer
      title="临时状态设置"
      :wrapper-closable="true"
      :before-close="handleClose"
      :visible.sync="visible"
      direction="rtl"
      :size="400"
      custom-class="drawer-pop"
      ref="role_drawer_pop"
    >
      <el-card>
        <div class="drawer-content">
          <!-- <el-divider content-position="center">权限</el-divider> -->
          <!-- <el-form :model="formData" class="add-form" label-width="100px" label-position="left">
            <el-form-item
              v-for="(obj,i) in formData.groupUsers"
              :key="i"
              al
              style="border-bottom: 1px solid #f1f1f1;"
              :label="obj.userName"
              :prop="'groupUsers.'+i+'.checked'"
            >

              <el-switch v-model="obj.checked" active-color="#f44336"></el-switch>
            </el-form-item>
          </el-form>-->
          <el-table :data="groupUsers" style="width: 100%">
            <el-table-column label="医生" prop="userName"></el-table-column>
            <el-table-column label="临时会诊">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.checked"
                  @change="setState(scope.row)"
                  active-color="#f44336"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="请假">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.checked2"
                  @change="setState2(scope.row)"
                  active-color="#f44336"
                ></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <!-- <div class="drawer-footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
          :loading="loading"
        >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>-->
    </el-drawer>
  </div>
</template>

<script>
import {
  querygroupleaveduties,
  leaveduty,
  backduty,
  postRole,
  getUserTeacher
} from '@/api/api-rostering.js'
export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    users: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dutyList: [],
      groupUsers: [],
      formData: {
        groupUsers: []
      },
      addlist: {
        name: '',
        remark: '',
        isDefault: false,
        isLocked: false,
        isSuperAdministrator: false
      },
      loading: false,
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入角色备注', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.querygroupleaveduties()
      }
      // this.resetData()
    },
    users(val) {
      console.log('111')
    }
  },
  methods: {
    resetData() {
      // this.addlist.name = ''
      // this.addlist.isDefault = false
      // this.addlist.isLocked = false
      // this.addlist.isSuperAdministrator = false
      // this.addlist.remark = ''
    },
    setState(row) {
      if (row.checked) {
        this.leaveduty(row.id, 0)
      } else {
        this.backduty(row.id, 0)
      }
    },
    setState2(row) {
      if (row.checked2) {
        this.leaveduty(row.id, 1)
      } else {
        this.backduty(row.id, 1)
      }
    },
    leaveduty(id, type) {
      let data = {
        userId: id,
        leaveType: type
      }
      leaveduty(data).then(res => {
        if (!res) return
        this.$message.success(res.message)
      })
    },
    backduty(id, type) {
      let data = {
        userId: id,
        leaveType: type
      }
      backduty(data).then(res => {
        if (!res) return
        // this.$message.success('操作成功！')
        this.$message.success(res.message)
      })
    },
    querygroupleaveduties() {
      querygroupleaveduties().then(res => {
        if (!res) return
        this.dutyList = res.result
        this.groupUsers = JSON.parse(JSON.stringify(this.users))
        for (let item of res.result) {
          let ui = this.users.findIndex(user => user.id == item.userId)
          if (ui >= 0) {
            if (item.leaveType === 0) {
              this.groupUsers.splice(ui, 1, {
                ...this.users[ui], ...{ checked: true }
              })
            } else {
              this.groupUsers.splice(ui, 1, {
                ...this.users[ui], ...{ checked2: true }
              })
            }
          }
        }
      })
    },
    getUserTeacher(val) {
      let data = {
        type: 0, // 0 老师 1：管理员，默认为老师
        hospitalCode: val
      }
      // console.log(data)
      getUserTeacher(data).then(res => {
        if (!res) return
        this.teacherList = res.Content.List
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    postRole() {
      let data = {
        name: this.addlist.name,
        isSuperAdministrator: this.addlist.isSuperAdministrator,
        isDefault: this.addlist.isDefault,
        isLocked: this.addlist.isLocked,
        remark: this.addlist.remark
      }
      postRole(data).then(res => {
        if (!res) return
        console.log('res', res)
        // this.$refs.resource_drawer_pop.closeDrawer()
        this.$emit('confirmEdit')
        this.$message({
          message: '角色添加成功',
          type: 'success'
        })
      })
    },
    handleConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.postRole()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose() {
      this.$emit(`update:visible`, false)
    },
    cancelForm() {
      this.loading = false
      this.$emit(`update:visible`, false)
    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__footer {
  text-align: center;
}
.form-wrap >>> .el-select {
  display: block;
}

.add-pop {
  >>> .el-drawer {
    padding: 0 20px;
    .el-drawer__header {
      padding: 10px 0px;
      //border-bottom: 1px solid #9e9e9e;
      margin-bottom: 10px;
    }
  }
  >>> .el-card__body {
    padding: 0px 20px;
    height: calc(100vh - 70px);
    overflow: auto;
  }
  >>> .el-select {
    display: block;
  }
  .drawer-footer {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    button {
      flex: 1;
    }
  }
}
</style>
